let items = document.querySelectorAll(".item");
let miaos = document.querySelectorAll(".miao");
let len = items.length;
let btn = document.querySelector(".btn");
let up = document.querySelector(".up");
let down = document.querySelector(".down");
let before = -1;
console.log(items);
let i = 1;
let j = 0;
items.forEach((item) => {
  item.style.top = "100vh";
});
miaos.forEach((miao) => {
  miao.style.top = "-100vh";
  miao.style.left = 0;
});
miaos[0].style.top = "0";
items[0].style.top = "0";
up.addEventListener("click", () => {
  let now = i % len;
  let before = (i - 1) % len;
  if (now < before) {
    items.forEach((item, idx) => {
      if (idx === 0) item.style.top = 0;
      else item.style.top = "100vh";
    });
    miaos.forEach((item, idx) => {
      if (idx === 0) item.style.top = 0;
      else item.style.top = "-100vh";
    });
  } else {
    items[now].style.top = "0";
    items[before].style.top = "-100vh";
    miaos[now].style.top = "0";
    miaos[before].style.top = "100vh";
  }

  i++;
  j = i - 1;
});

down.addEventListener("click", () => {
  j += 3;
  let now = (j - 1) % len;
  let before = j % len;
  if (now > before) {
    items.forEach((item, idx) => {
      if (idx === len - 1) item.style.top = 0;
      else item.style.top = "-100vh";
    });
    miaos.forEach((item, idx) => {
      if (idx === len - 1) item.style.top = 0;
      else item.style.top = "100vh";
    });
  } else {
    items[now].style.top = "0";
    items[before].style.top = "100vh";
    miaos[now].style.top = "0";
    miaos[before].style.top = "-100vh";
  }

  j--;
  j += 3;
  i = j + 1;
});
